<template>
  <div>
    <div class="top">
      <van-nav-bar title="设置新密码" left-text="返回" left-arrow  @click-left="onClickLeft"/>
    </div>
    <div>
    <div class="tesp">
<!-- 允许输入正整数，调起纯数字键盘 -->
<van-field v-model="digit" type="digit" label="身份证号" />
<!-- 允许输入数字，调起带符号的纯数字键盘 -->
<van-field v-model="number" type="number" label="新密码" placeholder="请输入6到18位密码"/>
<!-- 输入密码 -->
<van-field v-model="password" type="password" label="确认密码" placeholder="请再次输入密码"/>
    </div>
    <div class="hotse">
      <p class="hotsep"> 6-18位，必须同时包含数字、小写和大写字母</p>
    </div>
    <div >
      <van-field
        v-model="sms"
        center
        clearable
        label="动态码"
        placeholder="请输入动态码"
      >
  <template #button>
    <div @click="resetCode()">
        <registerCode  :identifyCode="code" :contentWidth="100" :contentHeight="40"></registerCode>
    </div>
  </template>
</van-field>
    </div>
<div class="phone">
    <!-- 输入手机号，调起手机号键盘 -->
    <van-field v-model="tel" type="tel" label="手机号" />
</div>
<div class="Tips">
  PS：<br>
  如果是通过手机号找回密码或者注册，则第一行显示手机号。<br>
如果是通过身份证号找回密码或者注册，则第一行显示身份证号。
</div>
<div class="button">
  <van-button type="info" style="width:345px;" @click="setup">确定</van-button>
</div>
</div>
  </div>
</template>

<script>
import registerCode from "@/components/code"
export default {
   components:{
    registerCode
  },
  data() {
    return {
      digit: '131025199909098888',
      number: '',
      password: '',
      sms:'',
      tel:'13099998888',
      code:"",
    };
  },
  mounted(){
    this.resetCode();
  },
  methods: {
    /**
   * 重置验证码
   */
    resetCode(){
      this.code="";
      const codeList="zxcvbnmasdfghjklqwertyuiop1234567890";
      for(let i= 0; i<4;i++){
        let random =  Math.floor((Math.random() * codeList.length) + 0);
        this.code+=codeList[random]
      }
    },
    onClickLeft() {
       this.$router.push({path:'Mobilea'})
    },
    setup(){
       this.$router.push({path:'set'})
    }
  },
};
</script>

<style scoped >
.hot{
  width: 345px;
	height: 18px;
	margin-left: 15px;
	color: rgba(80, 80, 80, 1);
	font-size: 10px;
	line-height: 150%;
	text-align: left;
}
.phone{
  margin-top: -5px;
}
.Tips{
  width: 345px;
	height: 105px;
  margin-left: 15px;
	color: rgba(80, 80, 80, 1);
	font-size: 14px;
	line-height: 150%;
	text-align: left;
	font-style: italic;
}
.button{
	height: 44px;
	color: rgba(255, 255, 255, 1);
	border-radius: 4px;
	font-size: 16px;
	line-height: 150%;
	text-align: center;
  margin-top: 25px;
}
.hots{
  background-color: #efefef;
  font-size: 12px;
}
.hotse{

   background-color: #efefef;
}
.tesp{
  background-color: #efefef;
}
.hotsep{
  margin-left: 14px;
  font-size: 12px;
}
</style>